<template>
	<view class="content">
		<view class="form">
			<view class="form-item">
				<view class="icon iconfont icon-shoujitianchong"></view>
				<input v-model="form.account" maxlength="11" class="form-input" type="number" placeholder="请输入您的手机号"
					placeholder-class="placeholder-style" />
			</view>
			<view class="form-item">
				<view class="icon iconfont icon-yanzhengmamima"></view>
				<input v-model="form.code" class="form-input" type="text" placeholder="请输入您收到的验证码"
					placeholder-class="placeholder-style" />
				<button @click="codeSend" size="mini" class="btn" v-if="!countdown">获取验证码</button>
				<button size="mini" class="btn" disabled v-else>{{countdown}}秒后重新获取</button>
			</view>
			<view class="form-item">
				<view class="icon iconfont icon-mima"></view>
				<input v-model="form.password" class="form-input" type="password" placeholder="请输入您的登录密码"
					placeholder-class="placeholder-style" v-if="!showPassword" />
				<input v-model="form.password" class="form-input" type="text" placeholder="请输入您的登录密码"
					placeholder-class="placeholder-style" v-else />
				<uni-icons type="eye-filled" :size="24" v-if="showPassword"
					@tap="showPassword = !showPassword"></uni-icons>
				<uni-icons type="eye-slash-filled" :size="24" v-else @tap="showPassword = !showPassword"></uni-icons>
			</view>
			<view class="form-item">
				<view class="icon iconfont icon-mima"></view>
				<input v-model="form.password2" class="form-input" type="password" placeholder="请再次输入您的登录密码"
					placeholder-class="placeholder-style" v-if="!showPassword2" />
				<input v-model="form.password2" class="form-input" type="text" placeholder="请再次输入您的登录密码"
					placeholder-class="placeholder-style" v-else />
				<uni-icons type="eye-filled" :size="24" v-if="showPassword2"
					@tap="showPassword2 = !showPassword2"></uni-icons>
				<uni-icons type="eye-slash-filled" :size="24" v-else @tap="showPassword2 = !showPassword2"></uni-icons>
			</view>
			<view class="btn-area">
				<button @click="reg" class="btn-login">注册</button>
			</view>

			<view class="agreement">
				<view class="flex-c">
					<uni-icons type="checkbox-filled" size="20" v-if="isAgree" @tap="isAgree = !isAgree"></uni-icons>
					<uni-icons type="circle" size="20" v-else @tap="isAgree = !isAgree"></uni-icons>
					<text>我已阅读并同意</text>
					<navigator class="navigator" url="/pages/setting/agreement" hover-class="btn-hover">《供应商协议》
					</navigator>
					<text>和</text>
					<navigator class="navigator" url="/pages/setting/privacy" hover-class="btn-hover">《隐私政策》
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		sendCode,
		register
	} from '../../network/login.js';
	import {
		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	const form = reactive({
		account: '',
		code: '',
		password: '',
		password2: ''
	})
	const showPassword = ref(false)
	const showPassword2 = ref(false)
	const isAgree = ref(false)
	const timer1 = ref(null)
	const timer2 = ref(null)
	const countdown = ref('')
	const codeSend = () => {
		var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
		if (!reg.test(form.account)) {
			uni.showToast({
				icon: 'none',
				title: '请输入正确的手机号码 '
			})
			return false;
		}
		let data = {
			mobile: form.account,
			event: 'register'
		}
		sendCode(data).then(res => {
			countdown.value = 60;
			timer1.value = setInterval(() => {
				countdown.value -= 1;
			}, 1000)
			timer2.value = setTimeout(() => {
				clearInterval(timer1.value);
				countdown.value = null;
			}, 60000)
			uni.showToast({
				title:'发送成功',
				icon:'none'
			})
		})
	}
	const reg = () => {
		const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
		if (!reg.test(form.account)) {
			uni.showToast({
				icon: 'none',
				title: '请输入正确格式的手机号码 '
			})
			return false;
		}
		if (!form.code) {
			uni.showToast({
				icon: 'none',
				title: '请输入验证码'
			})
			return false;
		}
		if (form.password != form.password2) {
			uni.showToast({
				icon: 'none',
				title: '两次输入的密码不一致'
			})
			return false;
		}
		if (!isAgree.value) {
			uni.showToast({
				icon: 'none',
				title: '需要同意供应商协议和隐私政策才能使用'
			})
			return false;
		}
		let data ={
			mobile:form.account,
			password:form.password,
			code:form.code,
			group_id:'2'
		}
		register(data).then(res => {
			uni.setStorageSync('token', res.data.data.userinfo.token)
			uni.setStorageSync('logintime', format(res.data.time))
			uni.showToast({
				title: '登录成功'
			})
			setTimeout(()=>{
				uni.reLaunch({
					url: '/pages/inquiry/inquiry'
				})
			},300)
		})
	}
	const format = (timestamp) => {
		let date = new Date(timestamp*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		let Y = date.getFullYear() + '-';
		let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
		let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
		let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
		let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
		return Y + M + D + h + m + s;
	}
</script>

<style lang="scss">
	.content {
		background-color: #fff;
	}

	.form {
		position: relative;
		padding: 30rpx 48rpx 0 48rpx;
		margin-top: 100rpx;

		.form-item {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 2rpx solid #dcdfe6;
			margin-bottom: 30rpx;

			.icon {
				color: #f6bf00;
				font-size: 40rpx;
			}

			.form-input {
				flex: 1;
				height: 100%;
				padding: 0 20rpx;
				font-size: 32rpx;
			}

			.btn {
				width: 200rpx;
				height: 60rpx;
				padding: 0;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}

	.btn-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30rpx;
		margin-top: 60rpx;

		.btn-login {
			background-color: #f6bf00;
			color: #333;
			font-size: 28rpx;
			height: 80rpx;
			width: 600rpx;
			line-height: 80rpx;
		}
	}

	.agreement {
		margin-top: 20rpx;

		.flex-c {
			width: 100%;
			font-size: 28rpx;
			display: flex;
			justify-content: flex-start;

			.navigator {
				display: inline-block;
				color: #f6bf00;
				font-weight: bold;
			}
		}
	}
</style>